<div ng-controller="ImageCropCtrl" ng-hide="hidePanel">


<div class="panel panel-primary" >
	<div class="panel-heading">
	
		<!-- ng-click="hidePanel=!hidePanel" -->
		<h3 class="panel-title text-center">图像截剪工具
			<!--
			<span class="glyphicon pull-right glyphicon-chevron-up" aria-hidden="true" ng-show="!hidePanel" ></span>
			<span class="glyphicon pull-right glyphicon-chevron-down" aria-hidden="true" ng-show="hidePanel" ></span>
			-->
		</h3>
					
	</div>
	
	

   <div class="panel-body" style="margin-bottom:0;padding-bottom:0;">
	<a class="btn btn-success btn-lg" ng-href="" ng-click="enableCrop=!enableCrop;$parent.selectedOriginal=!enableCrop;" style="display:block;margin:0 auto;margin-bottom:10px;width:200px;"><span ng-show="enableCrop">放弃选区，使用原图</span><span ng-show="!enableCrop">加载截剪工具</span></a>      

   
	  <!--<div>请选择一个图片文件: <input type="file" id="fileInput" /></div>-->
	  <div ng-if="enableCrop" class="cropArea" ng-class="{'big':size=='big', 'medium':size=='medium', 'small':size=='small'}">
		<img-crop 
			image="imageDataURI" 
			result-image="$parent.resImageDataURI"  
			change-on-fly="changeOnFly"
			area-type="{{type}}"
			area-min-size="selMinSize"
			result-image-format="{{resImgFormat}}"
			result-image-quality="resImgQuality"
			result-image-size="resImgSize"
			on-change="onChange($dataURI)"
			on-load-begin="onLoadBegin()"
			on-load-done="onLoadDone()"
			on-load-error="onLoadError()"
		></img-crop>
	  </div>
	  
 
	  
<img ng-src="{{imageDataURI}}" class="img-thumbnail img-responsive" alt="截剪前的图像" style="max-width:800px;margin:0 auto;display:block;" ng-show="!enableCrop" />

<img ng-src="{{resImageDataURI}}" class="img-thumbnail" style="display:none;"/>

   </div>
   <div class="panel-footer" ng-hide="hidePanel">
   
   
   
<div class="form-inline text-danger text-center"  ng-show="enableCrop">
  <div class="form-group" style="padding:0 35px;">
		<label>选区大小：</label>
		<label>
		  <input type="radio" ng-model="size" value="big">大
		</label>
		<label>
		  <input type="radio" ng-model="size" value="medium">中
		</label>
		<label>
		  <input type="radio" ng-model="size" value="small">小
		</label>
  </div>
  <div class="form-group" style="padding:0 35px;">
		<label>选区类型：</label>
	   <label>
		  <input type="radio" ng-model="type" value="square">矩形
	   </label>
	   <label>
		  <input type="radio" ng-model="type" value="circle">圆
	   </label>
  </div>
 
  <!--
  <div class="form-group" style="padding:0 15px;">
    <label>选区最小尺寸：</label>
	   <input type="text" class="form-control" ng-model="selMinSize" _placeholder="Size = Width = Height" style="width:70px;padding-right:10px;"/> 
  </div> 
  -->
  <div class="form-group" style="padding:0 15px;">
    <label>截剪图尺寸：</label>
	<input type="text" class="form-control" ng-model="resImgSize" ng-change="selMinSize=resImgSize" _placeholder="Size = Width = Height" style="width:70px;padding-right:10px;" />
	   
  </div>
  <!--
  <div class="form-group" style="padding:0 15px;">
    <label>截剪图质量：</label>
	   <input type="text" class="form-control" ng-model="resImgQuality" _placeholder="(0<=X<=1)" style="width:70px;padding-right:10px;"/> 
  </div>
  -->
</div>   
  
   </div>
   
</div>
</div>